<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>创建dom文档碎片</h2>
    <button class="btn">添加10个li</button>
    <ul class="list"></ul>
</body>
<script>
    const btn = document.querySelector('.btn')
    const list = document.querySelector('.list')

    // btn.addEventListener('click', function(e) {

    //     for (let i = 0; i < 1000; i++) {
    //         //创建li
    //         const li = document.createElement('li')
    //         li.textContent = `新闻列表${i+1}`
    //         list.appendChild(li)
    //     }

    // }, false)

    //创建一个文档碎片,内存,类似于vue的虚拟dom
    const fragement = document.createDocumentFragment()
    btn.addEventListener('click', function(e) {

        for (let i = 0; i < 1000; i++) {
            //创建li
            const li = document.createElement('li')
            li.textContent = `新闻列表${i+1}`
            fragement.appendChild(li)
        }


        list.appendChild(fragement)

    }, false)
</script>

</html>